.banner-container {
    visibility: collapse;
    height: 32px;
    width: auto;

    @include respond(sm) {
        height: 36vw;
        position: relative;
        overflow: hidden;
        visibility: visible;
    }

    .banner-info {
        z-index: 9999;
        position: absolute;
        bottom: 0;
        right: 0;
        margin-bottom: 2%;
        margin-right: 2%;
        text-align: center;
        font-family: var(--article-font-family);

        svg {
            width: 22px;
            height: auto;

            &:hover {
                stroke: gainsboro;
                transition: width 0.5s;
                -webkit-transition: width 0.5s;
            }
        }

        .banner-info-text {
            color: white;
            border-radius: 6px;
            background-color: rgba($color: #000000, $alpha: 0.3);
            padding: 10px;
            margin-right: 36px;
        }

        &:hover ~ .banner-img {
            scale: 1.01;
            filter: blur(3px);
            transition: filter 0.5s, scale 1s;
        }
    }

    .banner-img {
        z-index: -1;
        position: fixed;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: filter 0.5s, scale 1s;
    }
}
